<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<style>
ul, li{ list-style: none;}
.menu_oper ul,.menu_oper ul li { padding: 0px; margin: 0px;}
.menu_oper{ /*border:2px #C93 solid; border-radius:5px;*/  }
.menu_Item{ background:none; margin-right:20px; width:400px; padding:10px;}
.menu_Item input{ font-size:14px;}
.sub_menu_item{ width:400px; height: 30px;}
.submenu_operate{ float:none;}
.submenu_operate button{  cursor:pointer}
.submenu_operate a, .submenu_operate_li a{ font-size:12px;}
.menu_name, .submenu_name{ border:0; background:none; width:190px; height:25px;}
.submenu_name{}
.submenu_operate_li{}
.btn-danger-del{padding: 0px 5px; background-color: #F4F4F4; color: #6D6D6D; border:1px solid #AFB4B7; text-shadow: none}
</style>
<c:if test="${message }">
	<div style="width: 98%;">
		<strong>添加成功</strong>
	</div>
</c:if>
<c:if test="${message==false }">
	<div style="width: 98%;">
		<strong><font color="red">添加失败</font></strong>
	</div>
</c:if>
<div>
  <div class="menu_oper">
    <ul>
      <c:forEach items="${menus }" var="menu">
        <li class="menu_Item" id="menuItem_${menu.id}">
            <input type="button" value="-" onclick="swapSubMenu('subMenu_${menu.id }', this)" style=" width: 25px;" />
            <input value="${menu.name }" class="menu_name" id="menuName_${menu.id }" onchange="submenuOnchange('${menu.id }')" />
            <span class="submenu_operate"> 
            	<button onclick="javascript:alterSubMenu('${menu.id }', 'menuName_${menu.id }', this, 'menu')" disabled="disabled" id="alterButton_${menu.id }">确认修改</button>
           		<button onclick="javascript:delMenu('${menu.id }',0)" class="btn btn-danger  btn-danger-del">删除</button>
            </span>
            <ul id="subMenu_${menu.id }">
              <c:forEach items="${menu.childs }" var="subMenu">
                <li class="sub_menu_item" id="subMenuItem_${subMenu.id }">
                  <table style=" width:380px;">
                    <tr>
                      <td width="228px;" style=" padding-left: 5px;">
	                	<font color="#ccc">┕┄</font>
	                	<input value="${subMenu.name }"  class="submenu_name"  id="subMenuName_${subMenu.id }"
	                		onchange="submenuOnchange('${menu.id }-${subMenu.id }')" width="100" />
	                  </td>
	                  <td>
	                	<span class="submenu_operate">
	                      <button onclick="javascript:alterSubMenu('${subMenu.id }', 'subMenuName_${subMenu.id }', this)" disabled="disabled" id="alterButton_${menu.id }-${subMenu.id }" >确认修改</button>
	                      <button onclick="javascript:delMenu('${subMenu.id }',1)" class="btn btn-danger  btn-danger-del">删除</button>
	                    </span>
                      </td>
                    </tr>
                  </table>	
                </li>
  			  </c:forEach>
  			  
                <li class="submenu_operate_li">
                	<a href="javascript:addMenu('${menu.id }')">添加子菜单</a>
                </li>
            </ul>
        </li>
	  </c:forEach>
        <li><a href="javascript:addMenu('0')">添加新菜单项</a></li>
    </ul>
  </div>
  
  <form name="form1" action="<%=basePath %>backend/menu/add" method="post">
    <div  id="addMenuDiv" class="col-sm-6 input-group" style=" width:560px" >
  	  	<span class="input-group-addon">归属</span>
		<select name="fid" class="form-control" style=" width:200px; float: left; margin-right: 5px;">
	    	<option value="0">--一级菜单--</option>
	    	<c:forEach items="${menus }" var="menu">
	    	  <option value="${menu.id }">${menu.name }</option>
	    	</c:forEach>
	    </select>
	    <input type="text" name="name" class="form-control"  style="width:210px; height:34px; float:left; margin-right: 5px; "/>
	    <button type="submit" class="btn btn-info">添加</button>
    </div>
  </form>
</div>

<script type="text/javascript">
function addMenu(pid) {
	var w = $(document.body).width();
	var h = $(document.body).height();
	
	var newObject = $($("#addMenuDiv").clone(true));
	newObject.attr("id", "newAddMenuDiv");
	$("body").append(newObject);
	newObject.css({
		"position":"absolute",
		"top": (h - newObject.height()) / 2 + "px",
		"left": (w - newObject.width()) / 2 + "px"
		});

	
}

function swapSubMenu(subMenuId, inputElem) {
	var subMenu = $("#"+subMenuId);
	if (subMenu.css("display") == "none") {
		//显示操作
		$("#"+subMenuId).css("display","block");
		$(inputElem).val("-");
	} else {
		//隐藏操作
		$("#"+subMenuId).css("display","none");
		$(inputElem).val("+");
	}
}

function delMenu(id, type) {
	
	var url = "";
	if (type == 0) {
		url = "<%=basePath%>backend/menu/del";
	} else if (type == 1) {
		url = "<%=basePath%>backend/menu/delSubMenu";
	} else 
		return false;
	
	//利用ajax更改数据
	$.ajax({ url: url+"?id="+id,
		beforeSend:function() {
		},
		success: function(date){
			if (date == "success") {
				promptWindow("删除成功!");
				if (type == 0)
					$("#menuItem_"+id).remove();
				else if (type == 1)
					$("#subMenuItem_"+id).remove();
			} else {
				promptWindow("删除失败,请稍后再试！");
			}
    	},
    	complete: function(){
    		
    	},
    	error:function(){
    		promptWindow("网络繁忙,请稍后再试！");
    	}
	});
}

function alterSubMenu(id, inputId, btn, menu) {
	var inputElem = $("#"+inputId);
	var button = $(btn);
	var name = inputElem.val();
	
	if (name == null || name.trim() == "") {
		promptWindow("请输入菜单名!");
		return false;
	}
		
	var url = "<%=basePath%>backend/menu/submenuupdate";
	if (menu == "menu") {
		url = "<%=basePath%>backend/menu/update";
	}
	
	//利用ajax更改数据
	$.ajax({ url: url+"?id="+id+"&name="+name,
		beforeSend:function() {
			button.attr("disabled", true);
		},
		success: function(date){
			if (date == "success") {
				promptWindow("修改成功!");
				button.attr("disabled", true);
			} else {
				promptWindow("修改失败,请稍后再试！");
				button.attr("disabled", false);
			}
    	},
    	complete: function(){
    		
    	},
    	error:function(){
    		promptWindow("网络繁忙,请稍后再试！");
    		button.attr("disabled", false);
    	}
	});

}

function submenuOnchange(id) {
	$("#alterButton_"+id).attr("disabled", false);
}

function addMenu() {
	
}

</script>
